<template>
	<view class="page-img">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" placeholder="输入关键字搜索" disabled @click="search"/>
		</view>
		<!-- #endif -->
		<view class="bg-index" style="background-image: url('/static/bg.png');padding-top: 20px;">
			<!-- 头部轮播 -->
			<view class="carousel-section">
				<swiper class="carousel" circular @change="swiperChange">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="sliderToDetailPage(item)">
						<image :src="item.pic_url" />
					</swiper-item>
				</swiper>
				<!-- 自定义swiper指示器 -->
				<view class="swiper-dots">
					<text class="num">{{swiperCurrent+1}}</text>
					<text class="sign">/</text>
					<text class="num">{{swiperLength}}</text>
				</view>
			</view>
		
			<view class="cate-menu">
				<view class="cate-item" @click="navTo('/pages/category/category')" >
					<uni-icons custom-prefix="iconfont" type="icon-fenlei" size="35" color="$icon-color" class="icon-class"></uni-icons>
					<text>分类</text>
				</view>
				<view class="cate-item" @click="navTo('/pages/user/collection')">
					<uni-icons custom-prefix="iconfont" type="icon-shoucang" size="35" color="$icon-color" class="icon-class"></uni-icons>
					<text>收藏</text>
				</view>
				<view class="cate-item" @click="navTo('/pages/coupon/index')" v-if="couponInstalled">
					<uni-icons custom-prefix="iconfont" type="icon-youhuiquan" size="35" color="$icon-color" class="icon-class"></uni-icons>
					<text>优惠券</text>
				</view>
				<view class="cate-item" @click="navTo('/pages/seckill/index')" v-if="seckillInstalled">
					<uni-icons custom-prefix="iconfont" type="icon-miaosha" size="35" color="$icon-color" class="icon-class"></uni-icons>
					<text>秒杀</text>
				</view>
				<view class="cate-item" @click="navTo('/pages/order/order?status=-1')">
					<uni-icons custom-prefix="iconfont" type="icon-dingdan" size="35" color="$icon-color" class="icon-class"></uni-icons>
					<text>订单</text>
				</view>
			</view>
			
			<!-- 新品首发 -->
			<view class="new-goods" v-if="newGoodsList.length > 0">
				<view class="new-goods-left" @click="navToDetailPage(newGoodsList[0])">
					<img :src="newGoodsList[0]['pic']" style="height: 125px;width: 140px;"/>
					<p>{{ newGoodsList[0]['name'] }}</p>
					<span>￥{{ newGoodsList[0]['price'] }}</span>
				</view>
				<view class="new-goods-right">
					<view class="new-goods-top" v-if="newGoodsList.length > 1" @click="navToDetailPage(newGoodsList[1])">
						<img :src="newGoodsList[1]['pic']" style="height: 100%;"/>
						<view style="width: 300px;">
							<span class="right-title">{{ newGoodsList[1]['name'] }}</span>
							<span class="right-price">￥{{ newGoodsList[1]['price'] }}</span>
						</view>
					</view>
					<view class="new-goods-bottom" v-if="newGoodsList.length > 2" @click="navToDetailPage(newGoodsList[2])">
						<img :src="newGoodsList[2]['pic']" style="height: 100%;"/>
						<view style="width: 300px;">
							<span class="right-title">{{ newGoodsList[2]['name'] }}</span>
							<span class="right-price">￥{{ newGoodsList[2]['price'] }}</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 新品首发 -->
			
			<!-- 秒杀楼层 -->
			<view class="seckill-section m-t" v-if="seckillInstalled">
				<view class="s-header">
					<text style="color:#fff">限时秒杀</text>
					<text class="tip" style="color:#fff">{{ seckillHour }}点场</text>
					<text class="hour timer">{{ timer.hour }}</text>
					<text class="minute timer">{{ timer.minute }}</text>
					<text class="second timer">{{ timer.seconds }}</text>
					<text class="more-goods" @click="moreSeckill()" style="color:#fff">查看更多 &gt;</text>
				</view>
				<view class="seckill-goods-list" v-if="seckillGoods.length > 0">
					<view class="seckill-goods-item" v-for="item in seckillGoods" :key="item.id" @click="navToSeckillDetailPage(item)">
						<image :src="item.pic" style="width: 100%;height: 110px;margin-top: 5px;"></image>
						<uni-text class="title clamp"><span>{{ item.name }}</span></uni-text>
						<uni-text class="price"><span>￥{{ item.seckill_price }}</span></uni-text>
					</view>
				</view>
				<view style="background: #fff;" v-else>
					<xw-empty :isShow="seckillGoods.length == 0" text="暂无秒杀商品" textColor="#777777" style="margin: 0 auto;"></xw-empty>
				</view>
			</view>
			
			<!-- 精品热销 -->
			<view style="width: 90%;margin: 0 auto;margin-top: 15px;padding-bottom: 55px;">
				<view class="f-header">
					<view class="tit-box">
						<text class="tit">精品热销</text>
					</view>
				</view>
				<view class="guess-section">
					<view 
						v-for="(item, index) in goodsList" :key="index"
						class="guess-item"
						@click="navToDetailPage(item)"
					>
						<view class="image-wrapper">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
						<text class="title clamp">{{ item.name }}</text>
						<text class="price">￥{{ item.price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				goodsList: [],
				newGoodsList: [],
				couponInstalled: false,
				seckillInstalled: false,
				seckillGoods: [],
				seckillHour: 0,
				timer: {
					hour: 0,
					minute: 0,
					seconds: 0
				}
			}
		},
		onShow() {
			this.loadData()
			this.timeShow()
		},
		// 分享给好友
		onShareAppMessage(res) {
			return {
				title: 'SparkShop商城',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: 'SparkShop商城',
				path: '/pages/index/index'
			};
		},
		methods: {
			// 加载内容
			async loadData() {
				
				let res = await this.$api.home.home.get();
				
				let carouselList = res.data.slider
				if (carouselList.length > 0) {
					this.titleNViewBackground = carouselList[0].pic_url;
					this.swiperLength = carouselList.length;
					this.carouselList = carouselList;
				}
				
				let goodsList = res.data.hotSale;
				this.goodsList = goodsList || [];
				this.newGoodsList = res.data.newGoods
				this.couponInstalled = res.data.couponInstalled
				this.seckillInstalled = res.data.seckillInstalled
				this.seckillHour = res.data.seckillHour
				this.seckillGoods = res.data.seckillList;
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			// 导航跳转
			sliderToDetailPage(item) {
				if (item.type == 1) {
					console.log('/#' + item.target_url)
					uni.navigateTo({
						url: `${item.target_url}`
					})
				} else {
					window.location.href = item.target_url
				}
			},
			// 普通商品详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			// 秒杀商品详情
			navToSeckillDetailPage(item) {
				uni.navigateTo({
					url: '/pages/seckill/product?id=' + item.id
				})
			},
			// 页面跳转
			navTo(url) {
				if (url == '/pages/category/category') {
					uni.switchTab({
						url
					})
				}
				
				uni.navigateTo({
					url
				})
			},
			// 更多的秒杀商品
			moreSeckill() {
				uni.navigateTo({
					url: `/pages/seckill/index`
				})
			},
			// 当前时间
			timeShow() {
				var t = null;
				let self = this
				t = setTimeout(time, 1000); //开始运行
				function time() {
				  clearTimeout(t);  // 清除定时器
				  let dt = new Date();
					
				  self.timer.hour = (dt.getHours() < 10) ? '0' + dt.getHours() : dt.getHours()
				  self.timer.minute = (dt.getMinutes() < 10) ? '0' + dt.getMinutes() : dt.getMinutes()
				  self.timer.seconds = (dt.getSeconds() < 10) ? '0' + dt.getSeconds() : dt.getSeconds()
				  
				  t = setTimeout(time, 1000); //设置定时器，循环运行
				}
			},
			// h5 搜索
			onNavigationBarSearchInputClicked: async function(e) {
				uni.navigateTo({
					url: `/pages/index/search`
				})
			},
			// 小程序搜索
			search() {
				uni.navigateTo({
					url: `/pages/index/search`
				})
			}
		}
	}
</script>

<style lang="scss">
uni-page-body,page {
	background-color: rgb(246, 249, 255);
}
/* #ifdef MP */
.mp-search-box{
	position:absolute;
	left: 0;
	top: 30upx;
	z-index: 9999;
	width: 100%;
	padding: 0 80upx;
	.ser-input{
		flex:1;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		font-size: 28upx;
		color:$font-color-base;
		border-radius: 20px;
		background-color: rgb(246, 249, 255);
	}
}
page{
	.cate-section{
		position:relative;
		z-index:5;
		border-radius:16upx 16upx 0 0;
		margin-top:-20upx;
	}
	.carousel-section{
		padding: 0;
		.titleNview-placing {
			padding-top: 0;
			height: 0;
		}
		.carousel{
			.carousel-item{
				padding: 0;
			}
		}
		.swiper-dots{
			left:45upx;
			bottom:40upx;
		}
	}
}
/* #endif */
.page-img {
	background-color: rgb(246, 249, 255);
	min-height: 100vh;
	background-size: contain!important;
	background-repeat: no-repeat!important;
}
.bg-index {
	padding-top: 0px;
	margin-top: 0px;
	width: 100%;
	height: 365px;
	box-sizing: border-box;
	background-size: 100% 85% !important;
	background-repeat: no-repeat!important;	
}
.carousel {
	height: 400upx;
	padding-top: 94upx;
	width: 90%;
	margin: 0 auto;
	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
}
.swiper-dots {
	display: flex;
	position: relative;
	left: 60upx;
	bottom: 44upx;
	width: 72upx;
	height: 36upx;
	background-image: url();
	background-size: 100% 100%;

	.num {
		width: 36upx;
		height: 36upx;
		border-radius: 50px;
		font-size: 24upx;
		color: #fff;
		text-align: center;
		line-height: 36upx;
	}

	.sign {
		position: absolute;
		top: 0;
		left: 50%;
		line-height: 36upx;
		font-size: 12upx;
		color: #fff;
		transform: translateX(-50%);
	}
}
.cate-menu {
	width: 90%;
	background: #fff;
	border-radius: 5px;
	height: 90px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap:wrap;
	padding: 30upx 22upx; 
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
	}
	image {
		width: 88upx;
		height: 88upx;
		margin-bottom: 14upx;
		border-radius: 50%;
		opacity: .7;
		box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
	}
}
.icon-class {color: $icon-color}
.new-goods {
	width: 90%;
	margin: 0 auto;
	height: 182px;
	display: flex;
	margin-top: 30upx;
	.new-goods-left {
		height: 100%;
		width: 45%;
		background: #fff;
		img {
			margin-left: 10px;
		}
		p {
			display: block;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			white-space: break-spaces;
			font-size: 12px;
			padding: 0px 3px 0px 10px;
		}
		span {
			font-weight: 500;
			color: $icon-color;
			position: relative;
			top: 7px;
			font-size: 14px;
			padding-left: 10px;
		}
	}
	.new-goods-right {
		height: 100%;
		width: 50%;
		margin-left: 5%;
		display: flex;
		flex-direction: column;
		.new-goods-top {
			height: 48%;
			background: #fff;
			display: flex;
		}
		.new-goods-bottom {
			margin-top: 4%;
			height: 48%;
			background: #fff;
			display: flex;
		}
		
	}
	.right-title {
		display: block;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
		/* #ifdef MP */
		height: 38px;
		/* #endif */
		/* #ifdef H5 */
		height: 29px;
		/* #endif */
		font-size: 12px;
		padding: 5px 3px 5px 3px;
	}
	.right-price {
		font-weight: 500;
		color: $icon-color;
		position: relative;
		top: 12PX;
		text-overflow: ellipsis;
		display: -webkit-box;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
		font-size: 14px;
	}
}
/* 秒杀专区 */
.seckill-section {
	width: 90%;
	margin: 0 auto;
	margin-top: 15px;
	.s-header{
		display:flex;
		align-items:center;
		background: url('@/static/seckill_bg.png'), linear-gradient(to right, rgb(250, 100, 0), rgb(255, 40, 122));
		height: 92upx;
		line-height: 1;
		.s-img{
			width: 140upx;
			height: 30upx;
		}
		padding: 3px 15px 4px;
		.tip{
			font-size: $font-base;
			color: $font-color-light;
			margin: 0 20upx 0 40upx;
		}
		.timer{
			display:inline-block;
			width: 40upx;
			height: 36upx;
			text-align:center;
			line-height: 36upx;
			margin-right: 14upx;
			font-size: $font-sm+2upx;
			color: #fff;
			border-radius: 2px;
			background: rgba(0,0,0,.8);
		}
		.icon-you{
			font-size: $font-lg;
			color: $font-color-light;
			flex: 1;
			text-align: right;
		}
	}
}
.seckill-goods-list {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	.seckill-goods-item {
		width: 115px;
		height: 168px;
		background: #fff;
		.title {
			font-size: 13px !important;
			padding-left: 3px !important;
		}
		.price {
			font-size: 16px;
			color: #e93323;
			line-height: 2;
			font-weight: 500;
			padding-left: 3px;
			margin-top: 10px;
		}
		
	}
}
.more-goods {
	font-size: 12px;
	margin-left: auto;
	margin-right: -5px;
	color: #909399;
}

.f-header{
	display:flex;
	align-items:center;
	height: 100upx;
	padding: 6upx 30upx 8upx;
	background: #fff;
	image{
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.tit-box{
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.tit{
		font-size: $font-lg +2upx;
		color: #font-color-dark;
		line-height: 1.3;
	}
	.tit2{
		font-size: $font-sm;
		color: $font-color-light;
	}
	.icon-you{
		font-size: $font-lg +2upx;
		color: $font-color-light;
	}
}

.guess-section{
	display:flex;
	flex-wrap:wrap;
	margin-bottom: 15px;
	.guess-item{
		display:flex;
		flex-direction: column;
		width: 48%;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;
		padding-bottom: 40upx;
		&:nth-child(2n+1){
			margin-right: 4%;
		}
	}
	.image-wrapper{
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			opacity: 1;
		}
		background: #fff;
	}
	.title{
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		line-height: 80upx;
		padding-left: 10px;
		height: 80upx;
	}
	.price{
		font-size: $font-lg;
		color: $uni-color-primary;
		line-height: 1;
		font-weight: 500;
		padding-left: 20upx;
	}
}
</style>